import React, { useContext, useEffect } from 'react'
import { Button, Radio, Form, Input, Select, Upload, Cascader } from 'antd'
import { UploadOutlined } from '@ant-design/icons'
import { useRecoilValue, useRecoilState } from 'recoil'
import { appleJoin } from '../context'
import style from './style.module.less'
import IconSvg from '@/components/IconSvg'
import { validateEmail, validatorPhone, validateFillChargePeople } from '@/utils/formValidator'
// import { proviencsDataSelector } from '@/store/proviencs'
import { proviencsDataSelectorTwo, platformDetailsInfoSelect, platformDetailsInfo } from '@/store/platformDetails'

export default () => {
  const { formConfig } = useContext(appleJoin)
  const platformInfo = useRecoilValue(platformDetailsInfoSelect)

  const [platformInfoList, setPlatformInfoList] = useRecoilState(platformDetailsInfo)
  setPlatformInfoList(platformInfo)
  // const proviencData = useRecoilValue(proviencsDataSelector)
  const respone = useRecoilValue(proviencsDataSelectorTwo)
  console.log('responeresponeresponeresponeresponeresponerespone🚀🚀🚀🚀', respone)

  const { Dragger } = Upload

  useEffect(() => {
    localStorage.removeItem('token')
  }, [])

  return (
    <div>
      <div className={style.title}>医院申请</div>
      <div>
        <Form
          name='basic'
          labelCol={{ span: 7 }}
          wrapperCol={{ span: 16 }}
          initialValues={{ remember: true }}
          onFinish={formConfig.onFinish}
          autoComplete='off'
        >
          <Form.Item
            label='医院名称'
            name='hospitalName'
            rules={[{ required: true, validator: formConfig.validateTextLength }]}
          >
            <Input placeholder='请填写医院名称' style={{ width: 320 }} />
          </Form.Item>

          <Form.Item label='医院定级' name='hospitalLevel' rules={[{ required: true, message: '请选择医院定级!' }]}>
            <Radio.Group>
              {formConfig.hospitalRank.map((item: any) => (
                <Radio key={item.id} className={style.radisSpace} value={item.value}>
                  {item.name}
                </Radio>
              ))}
            </Radio.Group>
          </Form.Item>

          <Form.Item label='医院定等' name='hospitalRating' rules={[{ required: true, message: '请选择医院定等!' }]}>
            <Radio.Group>
              {formConfig.hospitalRated.map((item: any) => (
                <Radio key={item.id} className={style.radisSpace} value={item.value}>
                  {item.name}
                </Radio>
              ))}
            </Radio.Group>
          </Form.Item>

          <Form.Item
            label='是否教学医院'
            name='isTeachHospital'
            rules={[{ required: true, message: '请选择是否为教学医院!' }]}
          >
            <Radio.Group>
              {formConfig.yesNoHospital.map((item: any) => (
                <Radio key={item.id} className={style.radisSpace2} value={item.value}>
                  {item.name}
                </Radio>
              ))}
            </Radio.Group>
          </Form.Item>

          <Form.Item label='医院性质' name='hospitalNature' rules={[{ required: true, message: '请选择医院性质!' }]}>
            <Radio.Group>
              {formConfig.hospitalNature.map((item: any) => (
                <Radio key={item.id} className={style.radisSpace} value={item.value}>
                  {item.name}
                </Radio>
              ))}
            </Radio.Group>
          </Form.Item>

          <Form.Item label='医院类别' name='hospitalType' rules={[{ required: true, message: '请选择医院等级!' }]}>
            <Select
              style={{ width: 320 }}
              placeholder='请选择医院类别'
              //   onChange={onGenderChange}
              allowClear
            >
              {formConfig.hospitalType.map((item: any) => (
                <Select.Option key={item.id} className={style.radisSpace} value={item.value}>
                  {item.name}
                </Select.Option>
              ))}
            </Select>
          </Form.Item>

          <Form.Item
            label='统一社会信用代码'
            name='uscl'
            rules={[{ required: true, validator: formConfig.validateTongyixinyong }]}
          >
            <Input maxLength={18} placeholder='请输入18位包含数字或字母的统一社会信用代码' style={{ width: 320 }} />
          </Form.Item>
          <div className={style.xinyongmaBox}>
            统一社会信用代码查询可前往：
            <a target='_blank' rel='noopener noreferrer' href='https://www.cods.org.cn/'>
              https://www.cods.org.cn/
            </a>
          </div>

          <div style={{ marginTop: 10 }}>
            <Form.Item
              label='编制床位数'
              name='bedNum'
              rules={[{ required: true, validator: formConfig.validateBedNumber }]}
            >
              <Input maxLength={4} placeholder='阿拉伯数字，例如1000' style={{ width: 320 }} />
            </Form.Item>
          </div>

          <div style={{ marginTop: 10 }}>
            <Form.Item
              label='注册护士数'
              name='registeNurseNum'
              rules={[{ required: true, validator: formConfig.validateNurseNumber }]}
            >
              <Input maxLength={4} placeholder='阿拉伯数字，例如1000' style={{ width: 320 }} />
            </Form.Item>
          </div>

          <Form.Item
            label={
              <div style={{ display: 'flex' }}>
                <div className={style.xinghao}>* </div>
                <div>护理部电话</div>
              </div>
            }
          >
            <Form.Item name={['areaCode']} rules={[{ required: true, validator: formConfig.validateAreaCode }]} noStyle>
              <Input maxLength={4} style={{ width: '30%' }} placeholder='区号，如010' />
            </Form.Item>
            <span style={{ margin: '0 8px' }}>-</span>
            <Form.Item
              name={['phone']}
              rules={[{ required: true, validator: formConfig.validateAreaCodePhone }]}
              noStyle
            >
              <Input maxLength={8} style={{ width: '34%' }} placeholder='电话号码，如12345678' />
            </Form.Item>
          </Form.Item>

          <Form.Item
            label='填报负责人'
            name='fillChargePeople'
            rules={[{ required: true, validator: validateFillChargePeople }]}
          >
            <Input maxLength={30} placeholder='请填写负责人姓名' style={{ width: 320 }} />
          </Form.Item>

          <Form.Item
            label='负责人手机号'
            name='chargePeoplePhone'
            rules={[{ required: true, validator: validatorPhone }]}
          >
            <Input maxLength={11} placeholder='请填写负责人手机号' style={{ width: 320 }} />
          </Form.Item>

          <Form.Item label='负责人邮箱' name='chargePeopleEmail' rules={[{ required: true, validator: validateEmail }]}>
            <Input placeholder='请填写负责人邮箱' style={{ width: 320 }} />
          </Form.Item>

          <Form.Item label='医院所在地' name='hospitalArea' rules={[{ required: true, message: '请选择医院所在地!' }]}>
            <Cascader style={{ width: 320 }} expandTrigger='hover' options={respone} placeholder='请选择医院所在地' />
          </Form.Item>

          {/* rules={[{ required: true, message: '请上传承诺书!' }]} */}
          <Form.Item
            label={
              <div style={{ display: 'flex' }}>
                <div className={style.xinghao}>*</div>
                <div>上传承诺书</div>
              </div>
            }
            name='promiseBook'
          >
            <div className={style.upload}>
              <Dragger
                disabled={formConfig.uploadFileArray.length > 0}
                customRequest={formConfig.handleFileUpload}
                showUploadList={false}
                accept='.jpg,.jpeg,.png,.pdf,.docx'
              >
                {formConfig.uploadFileArray.length === 0 ? (
                  <p className='custom-upload'>
                    <UploadOutlined className='custom-upload-icon' rev={undefined} />
                    <span style={{ marginLeft: 5 }} className='custom-upload-text'>
                      上传文件
                    </span>
                  </p>
                ) : (
                  <span>已上传</span>
                )}
              </Dragger>
            </div>

            <div style={{ color: 'red', width: 340, marginTop: 20 }}>
              文档最大限制5M,上传格式支持JPG/JPEG/PNG/ WORD,建议先下载申请承诺书模版，完成并上传后 再填写网页信息
            </div>
            <div className={style.uploadBox}>
              <div style={{ color: '#7098ff' }}>
                <IconSvg name='upload' style={{ marginRight: 5 }} />
                <a
                  download
                  target='_blank'
                  href='http://192.168.120.148:9991/static/承诺书模板-zj.docx'
                  rel='noreferrer'
                >
                  下载模板
                </a>
              </div>
            </div>
          </Form.Item>

          <Form.Item wrapperCol={{ offset: 10, span: 20 }}>
            <Button
              style={{ borderRadius: 5, width: 120, height: 40, marginTop: 30, marginBottom: 30 }}
              type='primary'
              htmlType='submit'
            >
              提交申请
            </Button>
          </Form.Item>
        </Form>
      </div>
    </div>
  )
}
